<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Chat Room</title>
</head>
<body>
    <label id="room_id">频道号：{{ room_id }}</label><br>
    <textarea id="chat-log" cols="100" rows="20"></textarea><br>
    <input id="chat-message-input" type="text" size="100"><br>
    <input id="chat-message-submit" type="button" value="Send"><br>
    {{ room_id|json_script:"room-name" }}

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
    // 获取房间名
    {#const roomId = $("#room_id").val();#}
    const roomId = JSON.parse(document.getElementById('room-name').textContent);

    console.log('room-id:', roomId)
    // 根据roomName拼接websocket请求地址，建立长连接
    // 请求url地址为/ws/chat/<room_name>/
    const wss_protocol = (window.location.protocol == 'https:') ? 'wss://' : 'ws://';
    const chatSocket = new WebSocket(
        wss_protocol + window.location.host + '/ws/chat/' + roomId + '/?&id=' + roomId
    );

    // 建立websocket连接时触发此方法，展示欢迎提示
    chatSocket.onopen = function (e) {
        document.querySelector('#chat-log').value += ('[公告]欢迎来到' + roomId + '讨论群。请文明发言!\n')
    }

    // 从后台接收到数据时触发此方法
    // 接收到后台数据后对其解析，并加入到聊天记录chat-log
    chatSocket.onmessage = function (e) {
        const data = JSON.parse(e.data);
        document.querySelector('#chat-log').value += (data.message + '\n');
    };

    // websocket连接断开时触发此方法
    chatSocket.onclose = function (e) {
        console.error('Chat socket closed unexpectedly');
    };

    document.querySelector('#chat-message-input').focus();
    document.querySelector('#chat-message-input').onkeyup = function (e) {
        if (e.keyCode === 13) {  // enter, return
            document.querySelector('#chat-message-submit').click();
        }
    };

    // 每当点击发送消息按钮，通过websocket的send方法向后台发送信息。
    document.querySelector('#chat-message-submit').onclick = function (e) {
        const messageInputDom = document.querySelector('#chat-message-input');
        const message = messageInputDom.value;

        //注意这里:先把文本数据转成json格式,然后调用send方法发送。
        chatSocket.send(JSON.stringify({
            'message': message
        }));
        messageInputDom.value = '';
    };
</script>
</body>
</html>